import React, { Component } from 'react'
import "./liveinfo.scss";
import Header from '../../components/Header/header'
import Footer from '../../components/Footer/footer'  
import { getApiLiveInfo , getApiCoursesCatalogue , getApiUserShopCart , getApiLiveApply , getApiSaveUserShopCart } from "../../axios/api"
import { get, UrlSearch } from '../../axios/localstorage';
import { message } from 'antd';

export default class liveinfo extends Component {

    state = {
        ctype:1,
        data:{},
        data2:{
            teacher:{},
            live_class:[]
        },
        list:[],
        barr:[],
        teacher:0,
        id:"",
    }

    componentWillMount(){
        let id = UrlSearch("id");
        let teacher = UrlSearch("teacher");
        this.setState({
            id,
            teacher:teacher?teacher:0
        })
        this.getData(id);
        // if(get('token')){
        //     this.getShopData();
        // }
        // this.getCate(id);
    }

    componentDidMount(){
        window.scroll(0,0);
    }

    getShopData=()=>{
        getApiUserShopCart({token:get('token')})
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    barr:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoChangeCtype=(type)=>{
        this.setState({
            ctype:type
        })
    }

    getCate=(id)=>{
        let param = {
            id,
            token:get('token'),
        }

        getApiCoursesCatalogue(param)
        .then( req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    list:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    getData=(id)=>{
        let param = {
            live_id:id,
            token:get('token'),
            type:get('type')?get('type'):0,
        }

        getApiLiveInfo(param)
        .then(req =>{
            if(req.data.code === 1){
                let data = req.data.data;
                this.setState({
                    data,
                    data2:data
                })
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoPage=(page)=>{
        this.props.history.push(page);
    }

    gotoReceive=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }
    }

    gotoAdd=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }

        if(get('token')){
            return false;
        }

        let param = {
            type:2,
            live_id:this.state.data.id,
            money:this.state.data.money,
            token:get('token'),
            course_type:2,
        }

        getApiSaveUserShopCart(param)
        .then( req =>{
            if(req.data.code === 1){
                message.success("加入成功");
                this.getShopData();
            }else{
                message.info(req.data.msg)
            }
        }).catch( err =>{
            console.error(err);
        })
    }

    gotoBuy=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }
    }

    gotoOrder=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }
    }

    gotoApply=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }

        if(this.state.data.is_apply){
            message.info("已经预约，请勿重复操作！");
            return false;
        }

        let param = {
            live_id:this.state.id,
            token:get('token'),
            type:get('type')?get('type'):0,
            content:get('city')?get('city'):get('mechanism')
        }

        getApiLiveApply(param)
        .then( req =>{
            if(req.data.code === 1){
                message.success("预约成功！");
                this.getData(this.state.id)
            }else{
                message.info(req.data.msg);
            }
        }).catch( err =>{

        })
    }

    gotoJoin=()=>{

        if(get('token')){
            this.gotoPage('/liveroom?id='+this.state.id);
        }else{
            message.info("请先登录")
        }
        
        
    }

    gotoShop=()=>{
        if(!get('token')){
            message.info("请先登录！");
            return false;
        }

        this.gotoPage('/basket')
    }

    render() {
        return (
            <div className="liveinfo">
                <Header />

                <div className='page1' style={{backgroundImage:"url('assets/img/zhibobeijing.png')"}}>
                    <div className='pm'>
                        <div className="cleft">
                            <img className="img" alt="" src="assets/imgs/dingwei.png" />
                            <p className="p_point" onClick={()=>{
                                if(get('type')){
                                    // this.gotoPage('/index')
                                    this.gotoPage('/home')
                                  }else{
                                    this.gotoPage('/home')
                                  }
                            }}>首页</p>
                            <img className="icon" alt="" src="assets/img/xiaji.png" />
                            <p className="p_point" onClick={()=>{this.gotoPage('/live')}}>直播中心</p>
                            <img className="icon" alt="" src="assets/img/xiaji.png" />
                            <p>课程详情</p>
                        </div>
                        <div className='name'>
                            <img alt="" src="assets/img/zhibozhonxin.png" />
                            <h2>直播中心</h2>
                            <p>在线直播，实时互动</p>
                        </div>

                        <div className="info">
                            <div className="ileft" style={{backgroundImage:"url('"+this.state.data.thumb_text+"')"}}></div>
                            <div className="iright">
                                <div className="title">
                                    <h2>{this.state.data.title}</h2>
                                    <div hidden={!this.state.data.is_new}>精品</div>
                                </div>
                                <div className="details">
                                    <img alt="" src="assets/imgs/renhsu.png" />
                                    <p>{this.state.data.nums}人</p>
                                    {/* <img alt="" src="assets/imgs/leibie.png" />
                                    <p>{this.state.data.label}</p> */}
                                    <img alt="" src="assets/imgs/shijain.png" />
                                    <p>{this.state.data.start_time}</p>
                                </div>
                                <div className="ddd">
                                    <div className="btns" hidden={!this.state.data.is_true}>
                                        <div className="btn3" onClick={()=>{this.gotoApply()}}>{this.state.data.is_apply?"已预约":"预约直播"}</div>
                                        <div className="btn2" hidden={!this.state.data.play_url} onClick={()=>{this.gotoJoin()}}>进入直播间</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>  
                </div>

                <div className="cen">
                    <div className="cmain">

                        <div className="cbox">
                            <div className="chead">
                                <div className={this.state.ctype === 1?"citem c_active":"citem"} onClick={()=>{this.gotoChangeCtype(1)}}>
                                    课程介绍
                                    <div className="icen"><span></span></div>
                                </div>
                            </div>
                            <div className="cinfo" hidden={this.state.ctype !== 1}>
                                <div className="ctitle">
                                    <img alt="" src="assets/imgs/kechenggaishu.png" />
                                    <p>课程概述</p>
                                </div>
                                <div className="ctext">
                                    <div className="cont" dangerouslySetInnerHTML={{
                                            __html: this.state.data.summary
                                        }}></div>
                                </div>
                                <div className="ctitle">
                                    <img alt="" src="assets/imgs/kechenggaishu.png" />
                                    <p>授课目标</p>
                                </div>
                                <div className="ctext">
                                    <div className="cont" dangerouslySetInnerHTML={{
                                            __html: this.state.data.target
                                        }}></div>
                                </div>
                            </div>

                            <div className="cinfo" hidden={this.state.ctype !== 2}>
                                {
                                    this.state.list.map((item,index)=>{
                                        return <div className="citem" key={index}>
                                                    <h2>{item.title}</h2>
                                                    {
                                                        item.child.map((elem,num)=>{
                                                            return <div className="c_class" key={num}>
                                                                        <img alt="" src="assets/imgs/suo1.png" />
                                                                        <p>{elem.title}</p>
                                                                    </div>
                                                        })
                                                    }
                                                </div>
                                    })
                                }
                            </div>
                        </div>

                        <div className="cright">
                            <div className="cteacher" onClick={()=>{this.gotoPage('/teacherinfo?isLive=1&id='+this.state.data2.teacher.tid)}}>
                                <h1>授课讲师</h1>
                                <div className="ct_info">
                                    <div className="ct_avatar" style={{backgroundImage:"url('"+this.state.data2.teacher.timage+"')"}}></div>
                                    <div className="cdiv">
                                        <h2>{this.state.data2.teacher.tname}</h2>
                                        {/* <p>{this.state.data2.teacher.title}</p> */}
                                    </div>
                                </div>
                                <div className="ctext">
                                    <p>名师课程：{this.state.data2.teacher.classnum}课</p>
                                    <p>名师直播：{this.state.data2.teacher.livenum}场</p>
                                </div>
                            </div>

                            <div className="c_course" hidden={this.state.data2.live_class.length === 0}>
                                <h1>相关课程</h1>
                                {
                                    this.state.data2.live_class.map((item,index)=>{
                                        return <div className="item" hidden={index > 1} key={index} onClick={()=>{this.gotoPage('/courseinfo?id='+item.id)}}>
                                                    <div className="itop" style={{backgroundImage:"url('"+item.image+"')"}}>
                                                        <span hidden={!item.is_new}>精品</span>
                                                    </div>
                                                    <div className="ibom">
                                                        <h2>{item.title}</h2>
                                                        <div onClick={(ev)=>{ev.stopPropagation()}}>
                                                            <p onClick={()=>{this.gotoPage('/school?isLive=1&id='+item.sid)}}>{item.stitle}</p>
                                                            <p onClick={()=>{this.gotoPage('/teacherinfo?isLive=1&id='+item.teacher_id)}}>{item.name}老师</p>
                                                        </div>
                                                        <div className='idiv'>
                                                            <div>{item.classnum}课时</div>
                                                            <span>{item.livenum}参加</span>
                                                        </div>
                                                    </div>
                                                </div>
                                    })
                                }
                            </div>
                        </div>
                    </div>
                </div>
                <Footer />
            </div>
        )
    }
}
